<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    /*获取项目的根路径*/
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://" + request.getServerName()+":"+request.getServerPort()+path+"/";
    /*basePath就是得到的跟路径类似于：http://localhost:8081/test/*/
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>detail</title>
    <!--网页图标-->
    <link rel="shortcut icon" href="<%=basePath%>/img/cat.png" type="image/x-icon">
    <link rel="stylesheet" href="<%=basePath%>/css/detail.css">
</head>
<body>
    <%--使用jsp指令将top1页面引入detail页面--%>
    <%@ include file="top1.jsp"%>
    <div class="content myFlex_x">
        <div class="index">
            <!--标题-->
            <div style="font-size: 20px;font-weight: 400;">宠物猫销量TOP5</div>
            <span class="everyIndex">> 布偶猫</span>
            <span class="everyIndex">> 英短金渐层</span>
            <span class="everyIndex">> 暹罗猫</span>
            <span class="everyIndex">> 美国短毛猫</span>
            <span class="everyIndex">> 中华田园猫</span>
        </div>
        <div class="cat">
            <c:forEach items="${requestScope.catList}" var="cat">
                <div date-id="${cat.id}" onclick="goTo(this)" class="everyCat">
                    <img class="catImg" src="<%=basePath%>/img/${cat.catImg}" style="width: 100%">
                    <div class="catName">${cat.catName}</div>
                    <div class="catPrice">￥${cat.price}</div>
                </div>
            </c:forEach>
        </div>
    </div>
<script>
    function goTo(that){
        // 获取触发事件的标签中date-id的值
        var id=that.getAttribute("date-id");
        // 将id传给后台
        // 打开一个新窗口（get请求）
        // get请求传参："地址?id="+id（字符串拼接）
        window.open("<%=basePath%>/buy?id="+id);
    }
</script>
</body>
</html>